<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新建产品</title>
    <style>
        body { font-family: Arial, sans-serif; }
        .container { width: 300px; margin: 50px auto; }
        .form-group { margin-bottom: 10px; }
        label { display: block; margin-bottom: 5px; }
        input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
        button { padding: 10px 20px; cursor: pointer; background-color: #28a745; color: white; border: none; border-radius: 4px; }
    </style>
</head>
<body>
<div class="container">
    <h2>新建产品</h2>
    <form id="addProductForm">
        <div class="form-group">
            <label for="productName">产品名称:</label>
            <input type="text" id="productName" name="productName" required>
        </div>
        <div class="form-group">
            <label for="productDescription">产品描述:</label>
            <textarea id="productDescription" name="productDescription" required></textarea>
        </div>
        <div class="form-group">
            <label for="productPrice">价格:</label>
            <input type="number" id="productPrice" name="productPrice" required>
        </div>
        <div class="form-group">
            <button type="button" onclick="createProduct()">创建产品</button>
            <button type="button" onclick="window.history.back()">取消</button>
        </div>
    </form>
</div>

<script>
    // 创建产品函数
    function createProduct() {
        const name = document.getElementById('productName').value;
        const description = document.getElementById('productDescription').value;
        const price = document.getElementById('productPrice').value;

        fetch('http://localhost:8080/products', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ name, description, price }),
        })
            .then(response => response.json())
            .then(data => {
                console.log('Success:', data);
                alert('产品创建成功');
                window.history.back();
            })
            .catch(error => {
                console.error('Error:', error);
                alert('产品创建失败: ' + error.message);
            });
    }
</script>

</body>
</html>